<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>京东轮播图</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		html {
			background: #ccc;
		}
		ul {
			list-style: none;
		}
		a{
			text-decoration: none;
		}
		img {
			border: none;
			vertical-align: bottom;
		}
		#box {
			width: 730px;
			height: 454px;
			margin: 30px auto;
			position: relative;
		}
		#flash-img li {
			position: absolute;
			opacity: 0;
			filter: alpha(opacity=0);
		}
		#flash-img .first {
			opacity: 1;
			filter: alpha(opacity=100);
		}
		#flash-btn {
			position: absolute;
			bottom: 10px;
			width: 100%;
			text-align: center;
		}
		#flash-btn li {
			display: inline-block;
			margin: 0 4px;
			width: 18px;
			text-align: center;
			line-height: 18px;
			color: #fff;
			font-size: 12px;
			background: #3e3e3e;
			border-radius: 50%;
			cursor: pointer;
		}
		#flash-btn .active {
			background: #b61b1f;
		}
		#move-btn{
			display: none;
		}
		#move-btn a{
			position: absolute;
			top: 50%;
			margin-top: -31px;
			width: 28px;
			height: 62px;
			text-align: center;
			line-height: 62px;
			color: #fff;
			font-size: 24px;
			background: rgba(0, 0, 0, .2);
		}
		#right-btn {
			right: 0;
		}
	</style>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
		(function ($) {
			$(function () {

				var
					iCurIndex = 0,
					timer = null;
				// box移入移出
				$('#box').hover(function (){
					clearInterval(timer);
					$('#move-btn').css('display', 'block');
				}, function (){
					autoMove();
					$('#move-btn').css('display', 'none');
				});

				// 往左运动
				$('#left-btn').click(function (){
					iCurIndex--;
					move();
				});
				//往右运动
				$('#right-btn').click(function (){
					iCurIndex++;
					move();
				});

				// 自动运行
				autoMove();
				function autoMove() {
					timer = setInterval(function () {
						iCurIndex++;
						move();
					}, 3000);
				}

				// 按钮列表鼠标移入效果
				$('#flash-btn').on('mouseover', 'li', function () {
					var iIndex = $(this).index();
					if(iIndex === iCurIndex) {
						return;
					}
					iCurIndex = iIndex;
					move();
				});

				// 运动函数
				function move() {
					if(iCurIndex < 0) {
						iCurIndex = $('#flash-btn li').length -1;
					}
					if(iCurIndex >= $('#flash-btn li').length) {
						iCurIndex = 0;
					}
					$('#flash-img li').stop(true).animate({
						opacity: 0
					},500).eq(iCurIndex).stop().animate({
						opacity: 1
					},500);
					$('#flash-btn li').removeClass('active').eq(iCurIndex).addClass('active');
				}
			});
		})(jQuery);
	</script>
</head>
<body>
	<div id="box">
		<ul id="flash-img">
			<li class="first"><a href=""><img src="images/jd_1.jpg" alt=""></a></li>
			<li><a href=""><img src="images/jd_2.jpg" alt=""></a></li>
			<li><a href=""><img src="images/jd_3.jpg" alt=""></a></li>
			<li><a href=""><img src="images/jd_4.jpg" alt=""></a></li>
			<li><a href=""><img src="images/jd_5.jpg" alt=""></a></li>
			<li><a href=""><img src="images/jd_6.jpg" alt=""></a></li>
		</ul>
		<ul id="flash-btn">
			<li class="active">1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
		</ul>
		<div id="move-btn">
			<a href="javascript:;" id="left-btn"><</a><a href="javascript:;" id="right-btn">></a>
		</div>
	</div>
</body>
</html>